//点击提交按钮,触发表单提交事件
$('#addCategory').on('submit', function () {
    // 返回表单的数据    最终拼接好的参数  xx==xx&xx==xx
    let formData = $(this).serialize()
    // console.log(formData);

    //发送添加分类目录请求
    $.ajax({
        type: 'post',
        url: '/categories',
        data: formData,
        success: function () {
            alert('分类目录添加成功')
            //重新加载本页面
            location.reload()
        },
        error: function () {
            alert('分类目录添加失败')
        }
    })
    //自己发起ajax, 取消提交表单默认行为
    return false
})

//分类展示
$.get('/categories', function (response) {
    // console.log(response);
    let html = template('categorytpl', { data: response })
    $('tbody').html(html)
})

//编辑分类目录. 因为编辑按钮是后面才创建的,所以需要使用事件委托
$('tbody').on('click', '.edit', function () {
    let id = $(this).attr('data-id')
    $.get('/categories/' + id, function (response) {
        console.log(response);
        //将该分类,传到编辑模板,进行编辑
        //直接传递对象,不需要大括号
        let html = template('modifyCategory', response)
        //放入tbody中
        $('#modifyBox').html(html)
    })
})

//提交修改分类目录,因为modifyForm是后面才创建的,所以需要事件委托
$('#modifyBox').on('submit', '#modifyForm', function () {
    let formData = $(this).serialize()
    //2, 获取表单上的id, 记录你修改的试谁
    let id = $(this).attr('data-id')
    $.ajax({
        type: 'put',
        url: '/categories/' + id,
        data: formData,
        success: function () {
            location.reload()
        }
    })
    return false  //阻止默认行为
})

//点击删除按钮,提交删除操作, 同样需要事件委托
$('tbody').on('click', '.delete', function () {
    if (confirm('确定删除这个分类目录吗?')) {
        let id = $(this).attr('data-id')
        //发送删除ajax请求
        $.ajax({
            type: 'delete',
            url: '/categories/' + id,
            success: function () {
                location.reload()
            }
        })
    }
})

//全选按钮
$('#selectAll').on('change', function () {
    let status = $(this).prop('checked')
    //设置tbody中的复选框,和全选框保持一致
    $('tbody input').prop('checked', status)
    if (status) {
        $('#deleteMany').show()
    } else {
        $('#deleteMany').hide()
    }
})

//当tbody中的复选框,状态变化时, 这里也需要托
//这里'tbody input'不能这么写,因为tbody是父级
$('tbody').on('change', 'input', function () {
    //如果所有的用户复选框选中了, 就全选按钮选中
    let inputs = $('tbody input')  //拿到所有用户
    if (inputs.length == inputs.filter(':checked').length) {
        $('#selectAll').prop('checked', true)
    } else {
        $('#selectAll').prop('checked', false)
    }
    //如果有任何一个用户复选框选中,则出现批量删除按钮
    if (inputs.filter(':checked').length > 0) {
        $('#deleteMany').show()
    } else {
        $('#deleteMany').hide()
    }
})

//点击批量删除,进行删除
$('#deleteMany').click(function () {
    //空数组
    let ids = []
    //拿到所有选中的复选框
    let checkeUser = $('tbody input').filter(':checked')

    checkeUser.each(function (index, element) {
        //将每个元素的id值, 加入到数组中
        ids.push($(element).attr('data-id'))
    })
    console.log(ids);
    // 发送ajax批量删除的请求
    if (confirm('确定批量删除用户吗?')) {
        $.ajax({
            type: 'delete',
            url: '/categories/' + ids.join('-'),
            success: function () {
                location.reload()
            }
        })
    }
})